<template>
  <div class="DetailNavBar">
      <nav-bar class="D-NavBar">
          <div slot="left" class="back" @click="backClick">
              <img src="../../assets/img/detail/back.svg" alt="">
          </div>
         <div slot="center" class="title">
             <div v-for="(item,index) in titles" 
                :key="index" class="title-item" 
                :class="{active:index === currentIndex}"
                @click="titltClick(index)"
                >{{item}}</div>
         </div>
      </nav-bar>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar'
export default {
  name: "DetailBavBar",
  //组件
  components: {
      NavBar  
  },
  data(){
      return{
          titles:['商品','参数','评论','推荐'],
          currentIndex : 0
      }
  },
  methods:{
      titltClick(index){
          this.currentIndex = index
      },
      backClick(){
          this.$router.back()
      }
  }
};
</script>

<style scoped>
.D-NavBar{
    background-color: LavenderBlush;
}
.title{
    font-size: 13px;
    display: flex;
}
.title-item{
    flex: 1;
}
.active{
    color: var(--color-high-text)
}
.back img{
    margin-top: 10px;
}
</style>